<template>
  <div style="display:flex;">
    <ContentWrap style="width: 36%; margin-right: 20px;">
        <div class="backBox">
            <img class="backIcon" src="../../../assets/imgs/back.png" alt="">
            <div class="backTitle" @click="go(-1)">返回列表</div>
        </div>
        <div class="addressBox">
            <div class="productName">{{formData.projectName}}</div>
            <div class="address">
                <Icon class="mr-5px" icon="ep:location" />
                <div class="address-detail">{{formData.city+formData.area+formData.address}}</div>
            </div>
        </div>
        <div clang="basicInfo">
            <p class="main-p">基本信息</p>
            <div class="basicInfo-main">
                <div class="basicInfo-item">
                    <div class="basicInfo-item-child">
                        <div class="basicInfo-title">司机车辆：</div>
                        <div class="basicInfo-val">闽D12345/张小凡</div>
                    </div>
                    <div class="basicInfo-item-child">
                        <div class="basicInfo-title">车辆类别：</div>
                        <div class="basicInfo-val">搅拌车</div>
                    </div>
                </div>
                <div class="basicInfo-item-child">
                    <div class="basicInfo-title">配送数量：</div>
                    <div class="basicInfo-val">{{formData.needNumber}}吨</div>
                </div>
                <div class="basicInfo-item-child">
                    <div class="basicInfo-item-title">到达时间：</div>
                    <div class="basicInfo-item-val">{{timestampToDateTime(formData.endTime)}}</div>
                </div>
                <div class="basicInfo-item">
                    <div class="basicInfo-item-child">
                        <div class="basicInfo-item-title">确认收货：</div>
                        <div class="basicInfo-item-val">{{timestampToDateTime(formData.startTime)}}</div>
                    </div>
                    <div class="basicInfo-item-child">
                        <div class="basicInfo-item-title">签收账号：</div>
                        <div class="basicInfo-item-val">小白</div>
                    </div>
                </div>
                <div class="basicInfo-item-child">
                    <div class="basicInfo-item-title">配送进度：</div>
                    <div class="basicInfo-item-val" style="width:70%">
                        <el-progress :percentage="((formData.endNumber / formData.needNumber)*100).toFixed(2)" :format="format"></el-progress>
                    </div>
                </div>
            </div>
        </div>
       <div class="pic">
            <p class="main-p" style="margin-bottom: 10px;">到货照片</p>
            <div class="imgsBox">
                <img src="../../../assets/imgs/avatar.jpg" alt="">
                <img src="../../../assets/imgs/avatar.jpg" alt="">
                <img src="../../../assets/imgs/avatar.jpg" alt="">
                <img src="../../../assets/imgs/avatar.jpg" alt="">
            </div>
       </div>
       <div class="pic">
            <p class="main-p" style="margin-bottom: 10px;">签收凭证</p>
            <div class="imgsBox">
                <img src="../../../assets/imgs/avatar.jpg" alt="">
                <img src="../../../assets/imgs/avatar.jpg" alt="">
                <img src="../../../assets/imgs/avatar.jpg" alt="">
                <img src="../../../assets/imgs/avatar.jpg" alt="">
            </div>
       </div>
       <div>
          <p class="main-p" style="margin-bottom: 10px;">月配送记录</p>
          <div class="basicInfo-main">
            <div class="table-head">
                <div>
                    订单号
                </div>
                 <div>
                    配送进度/总量
                </div>
                <div>配送时间</div>
            </div>
            <div class="table-head">
                <div>
                    20201505112213
                </div>
                 <div style="width:30%">
                    <el-progress :percentage="((formData.endNumber / formData.needNumber)*100).toFixed(2)" :format="format"></el-progress>
                </div>
                <div>{{timestampToDateTime(formData.endTime)}}</div>
            </div>
            
          </div>
       </div>
    </ContentWrap>
     <ContentWrap style="width:64%;">
         <div id="map" class="map"></div>
        <iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
            src="https://apis.map.qq.com/tools/geolocation?key=XAXBZ-2BCK5-2B3IR-QV75W-2SDAV-7QFNX&referer=hhh">
        </iframe>
    </ContentWrap>
  </div>
</template>

<script lang="ts" setup>
import * as PurchaseApi from '@/api/system/purchase'
import * as ProjectApi from '@/api/system/project'
import { dateFormatter } from '@/utils/formatTime'

const { query } = useRoute() // 查询参数
const { go } = useRouter() // 查询参数
var mapinfo = {marker:null,polylineLayer:null,path:null,loc:null}

const projectList = ref([])
const formData = ref({
  id: undefined,
  companyId: undefined,
  projectId: undefined,
  goodsId: undefined,
  needNumber: undefined,
  endNumber: undefined,
  province: undefined,
  city: undefined,
  area: undefined,
  address: undefined,
  lon: undefined,
  lat: undefined,
  startTime: undefined,
  endTime: undefined,
  projectName:undefined
})
const format =(percentage)=> {
    return percentage === 100 ? '满' : `${((formData.value.endNumber / formData.value.needNumber)*100).toFixed(2)}%/${formData.value.needNumber}吨`;
}
onMounted(async() => {
    let id= query.id
    let res  = await ProjectApi.getProjectPage({pageNo:1,pageSize:100})
    projectList.value = res.list
    formData.value = await PurchaseApi.getPurchase(id)
    formData.value.projectName = projectList.value.find(i=>i.id ==  formData.value.projectId)?.company 
    console.log(formData.value,'123----------------------140')
    window.addEventListener('message', function(event) {
        // 接收位置信息 你的其他操作
        var loc = event.data;
        //console.log('location', loc);
        if(loc && loc.lat && loc.lng){
            mapinfo.loc = loc;
            initmap( mapinfo.loc )
        }

    }, false);
})
function timestampToDateTime(timestamp) {
  var date = new Date(timestamp); // 将时间戳转换为毫秒
  var options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
  return date.toLocaleString('zh-CN', options);
}
const initmap=(loc)=>{
    var center = new window.TMap.LatLng(loc.lat,loc.lng);
    //初始化地图
    var mapDom = document.getElementById("map");
    var map = new window.TMap.Map('map', {
        zoom:16,//设置地图缩放级别
        center: center,//设置地图中心点坐标
    });
    //console.log(map,'111111')
    mapinfo.path =  [
        new window.TMap.LatLng(24.45149381672781, 118.08619582145691),
        new window.TMap.LatLng(24.45372057921502,118.08825575798035),
        new window.TMap.LatLng( 24.458330243156805, 118.09078776329041),
    ]
    mapinfo.polylineLayer = new window.TMap.MultiPolyline({
          map:map, // 绘制到目标地图
          // 折线样式定义
          styles: {
            style_blue: new TMap.PolylineStyle({
              color: '#ff8d00', // 线填充色
              width: 4, // 折线宽度
              borderWidth: 2, // 边线宽度
              borderColor: '#FFF', // 边线颜色
              lineCap: 'round', // 线端头方式
              eraseColor: 'rgb(172,172,172)',//擦除路径的颜色
            }),
          },
          geometries: [
            {
              id: 'erasePath',
              styleId: 'style_blue',
              paths:mapinfo.path,
            },
          ],
        });
         mapinfo.marker = new window.TMap.MultiMarker({
          map:map, // 绘制到目标地图
          styles: {
            'car-down': new window.TMap.MarkerStyle({
              width: 40,
              height: 40,
              anchor: {
                x: 20,
                y: 20,
              },
              faceTo: 'map',
              rotate: 180,
              src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
            }),
            start: new window.TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: {x: 16, y: 32},
              src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
            }),
            end: new window.TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: {x: 16, y: 32},
              src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
            }),
          },
          geometries: [
            {
              id: 'car',
              styleId: 'car-down',
              position: mapinfo.path[0],
            },
            {
              id: 'start',
              styleId: 'start',
              position:  mapinfo.path[1],
            },
            {
              id: 'end',
              styleId: 'end',
              position:  mapinfo.path[2],
            },
          ],
        });
        startCar()
}

const startCar=() =>{
        // 使用marker 移动接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
        //调用moveAlong动画 执行标记点动画开始
        mapinfo.marker.moveAlong(
          {
            car: {
              path: mapinfo.path,//移动路径的坐标串
              // duration:8000,//完成移动所需的时间，单位：毫秒
              speed: 250, //speed为指定速度，正整数，单位：千米/小时
            },
          },
          {
            autoRotation: true,//自动旋转
          }
        );
        //监听事件名
        mapinfo.marker.on('moving', (e) => {

          var passedLatLngs = e.car && e.car.passedLatLngs;
          if (passedLatLngs) {
         
            // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
            mapinfo.polylineLayer.eraseTo(
              'erasePath',
              passedLatLngs.length - 1,
              passedLatLngs[passedLatLngs.length - 1]
            );
          }
        });
  
      }
</script>

<style scoped>
.main-p {
    font-size: 16px;
    font-weight: 500;
    margin: 20px 0px;
}
.main-p::before {
    content: "●";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    color: rgba(81, 123, 255, 1);
}
.backBox{
    display: flex;
    align-items: center;
    /* margin-right: 10px; */
    cursor: pointer;
    margin-bottom: 40px;
}
.backIcon{
    width: 22px;
    /* height: 11px; */
    margin-right: 5px;
}
.backTitle{
        font-size: 16px;
}
.addressBox{
    
}
.productName{
        font-size: 22px;
}
.address{
        display: flex;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
}
.address-detail{
    
}
.basicInfo{
margin-bottom: 13px;
}
.basicInfo-main{
        background: rgba(249, 250, 255, 1);
    border-radius: 16px;
    padding: 20px;
    font-size: 16px;
}
.basicInfo-item{
        display: flex;
    justify-content: space-between;
}
.basicInfo-item-child{
    display: flex;
    padding-bottom: 13px;
    align-items: center;
}
.basicInfo-item-title{
    color: rgba(0, 0, 0, 0.6);
}
.basicInf-item-val{

}
.pic{

}
.imgsBox{
display: flex;
justify-content: space-between;
}
.imgsBox img{
    width: 100px;
    height: 74px;
    border-radius: 8px;
}
.table-head{
    color: rgba(0, 0, 0, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    padding-bottom: 13px;
}
#map {
    width: 100%;
    height: 1000px;
    border-radius: 20px;
    overflow: hidden
}
</style>